<template>
    <Swiper :options="swiperOptions" class="mmv-ad-container swiper-container swiper-container-initialized swiper-container-horizontal">
        <swiper-slide class="mmv-ad">
            <mmv-link target="_blank" to="/">
                <div class="mmv-ad__banner">
                    <img src="https://upload-bbs.mihoyo.com/pc_ad_ys.jpg" />
                </div>
            </mmv-link>
        </swiper-slide>
        <swiper-slide class="mmv-ad">
            <mmv-link target="_blank" to="/">
                <div class="mmv-ad__banner">
                    <img src="https://upload-bbs.mihoyo.com/pc_ad/ys_signin.jpg" />
                </div>
            </mmv-link>
        </swiper-slide>
        <swiper-slide class="mmv-ad">
            <mmv-link target="_blank" to="/">
                <div class="mmv-ad__banner">
                    <img src="https://upload-bbs.mihoyo.com/pc_ad_ys_game_record2.jpg" />
                </div>
            </mmv-link>
        </swiper-slide>
    </Swiper>
</template>

<script>
import "swiper/swiper-bundle.css";
// Swiper 6.x
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// Swiper 6.x
import { Swiper as SwiperClass, Autoplay } from "swiper/core";
// Swiper modules
SwiperClass.use([Autoplay]);

export default {
    name: "mmv-ad",
    components: {
        Swiper,
        SwiperSlide,
    },
    directives: {
        swiper: directive,
    },
    data() {
        return {
            swiperOptions: {
                loop: true,
                spaceBetween: 10,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            },
        };
    },
};
</script>

<style lang="less">
.mmv-ad {
    position: relative;
    overflow: hidden;
    a {
        display: block;
    }
    &-container {
        overflow: hidden;
        height: 160px;
        border-radius: 4px;
    }
    &__banner {
        height: 160px;
        img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }
    }
    &__title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        line-height: 32px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>